import React from 'react'
import clsx from 'clsx'
import Link from '@docusaurus/Link'
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
import styles from './styles.module.css'
import Translate from '@docusaurus/Translate'
import blankImage from '/static/img/blank_image.png'

export default function LeftFeature(): React.JSX.Element {
  const { siteConfig } = useDocusaurusContext()
  return (
    <header className={clsx('hero shadow--lw', styles.heroBanner)}>
      <div className="container">
        <div className="row">
          <div className={clsx('col col--6', styles.center)}>
            <h1 className="hero__title">{siteConfig.title}</h1>
            <p className="hero__subtitle">{siteConfig.tagline}</p>
            <div className="row">
              <div
                className={clsx(
                  'col col--8 col--offset-2',
                  styles.center
                )}>
                <Link
                  className={clsx(
                    'button button--lg button--block button--secondary',
                    styles.button
                  )}
                  to="/docs/">
                  <Translate description="homepageHeader_getting_started_button">
                    Getting started
                  </Translate>
                </Link>
              </div>
              <div
                className={clsx('col col--2', styles.center)}></div>
            </div>
          </div>
          <div className={clsx('col col--6', styles.center)}>
            <img
              src={blankImage}
              className={styles.screenshot}
              alt="Screenshot"
            />
          </div>
        </div>
      </div>
    </header>
  )
}
